<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>

</head>
<body>
        <h1>vue学习开始</h1>

        <div id="app">
            {{message}}
        </div>

        <h1>vue学习结束</h1>

</body>

    <script>
        new Vue({
            el:"#app",
            data:{
                message:"正在学习Vue",     //message的值应该是通过ajax请求从后台得到
            },
            methods:{
                //普通的方法
            },
            beforeCreate(){         //钩子方法，回调方法（这些方法我们无法直接调用，它是由vue对象自己来调用的）
                //vue对象创建之前自动调用
                console.log(this);
                console.log("beforeCreate()");


            },
            created(){
                //vue对象创建完成之后自动调用
                console.log(this);
                console.log("created()");

            },
            beforeMount(){
                //虚拟dom挂载到真实dom之前调用
                console.log(this);
                console.log("beforeMount()");

            },
            mounted(){
                //虚拟dom挂载到真实dom之后调用（最新数据会显示到浏览器中）
                console.log(this);
                console.log("mounted()");
                this.message="message的值被改变了";
            }
        })

    </script>

</html>